<template>
  <module
    ref="module"
    class="employee-report"
    :borderConfig="borderConfig"
    :moduleConfig="moduleConfig"
    :octagon="octagon"
    :barLineConfigTop="barLineConfigTop"
    :barLineConfigBottom="barLineConfigBottom"
    :doubleRingBottom="doubleRing"
    :pyramidTop="pyramid">
  </module>
</template>

<script>
import Module from './../components/Module.vue'
export default {
  name: 'employeeReport',
  components: {
    Module
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '员工报单',
        goPageUrl: '/home/employee'
      },
      moduleConfig: {
        isOctagon: true, // 是否需要头部的八边形
        topType: '13', // 第一层显示内容
        bottomType: '14' // 第二层显示内容
      },
      barLineConfigTop: {
        title: {
          text: '近一年员工报单趋势'
        },
        axis: {
          yAxisConversion: 'w', // Y轴坐标%
          xAxisDataType: 1, // X轴坐标从当前月份开始
          xAxisLabelInterval (index, name) {
            if (index % 2 === 1) {
              return name
            }
          }
        },
        yAxis: {},
        tooltipsConfig: {
          tipsColor: ['#f29f46'],
          isNearlyYear: true // 月份是否是当前月份开始
        },
        seriesData: []
      },
      barLineConfigBottom: {
        title: {
          text: '员工报单月度响应及时率和完成率'
        },
        axis: {
          yAxisConversion: '%', // Y轴坐标%
          xAxisDataType: 1, // X轴坐标从当前月份开始
          xAxisLabelInterval (index, name) {
            if (index % 2 === 1) {
              return name
            }
          }
        },
        yAxis: {
          max: 100 // 坐标轴最大值
        },
        tooltipsConfig: {
          symbol: '%',
          tipsColor: ['#2e92cb', '#b60d81'],
          isNearlyYear: true // 月份是否是当前月份开始
        },
        seriesData: []
      },
      octagon: {
        iconClass: ['icon-gongdan', 'icon-gongdanguanbi'],
        octagonName: ['今日员工报单', '待关闭工单'],
        octagonNumber: [0, 0],
        octagonUnit: ['个', '个']
      },
      pyramid: {
        title: '本月工单(件)',
        imgIndex: [2],
        tipsMessage: [{
          beforeMessage: '本月工单',
          message: 0,
          unit: '件'
        }]
      },
      doubleRing: {
        legend: ['本月完成率', '本月响应及时率'],
        data: []
      },
      presentMonthInformation: {}, // 工单模块信息
      employeeTrend: [], // 员工报单趋势
      employeeInformation: [] // 员工报单响应及时率和响应完成率
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    // 近一年员工报单趋势
    getServiceOrderInfoByMonth (isRefresh) {
      this.employeeApi.getServiceOrderInfoByMonth({ organId: this.organId, dataScope: 3, timeDimension: 14 }).then(res => {
        if (res.data.code === '0') {
          this.employeeTrend = res.data.data
        } else {
          this.employeeTrend = {}
          this.$parent.showTips('请求失败，点击确认继续刷新')
        }
        if (!isRefresh) {
          this.handleData()
        }
      }, res => {
        this.employeeTrend = {}
        if (!isRefresh) {
          this.handleData()
        }
        this.$parent.showTips('请求失败，点击确认继续刷新')
      })
    },
    // 员工报单响应及时率完成率
    getCKHoumePageOrderInfoByMonth (isRefresh) {
      this.employeeApi.getCKHoumePageOrderInfoByMonth({ organId: this.organId, dataScope: 3, timeDimension: 14 }).then(res => {
        if (res.data.code === '0') {
          this.employeeInformation = res.data.data
        } else {
          this.employeeInformation = {}
          this.$parent.showTips('请求失败，点击确认继续刷新')
        }
        if (!isRefresh) {
          this.handleData2()
        }
      }, res => {
        this.employeeInformation = {}
        if (!isRefresh) {
          this.handleData2()
        }
        this.$parent.showTips('请求失败，点击确认继续刷新')
      })
    },
    // 获取当月数据
    presentMonth () {
      this.employeeApi.presentMonth({ organId: this.organId, dataScope: 3 }).then(res => {
        if (res.data.code === '0') {
          let data = res.data.data
          this.octagon.octagonNumber = [data.currentDayOrder, data.waitCloseOrder]
          this.pyramid.tipsMessage[0].message = data.currentMonthOrder
          this.doubleRing.data = [parseFloat(data.overRate.replace('%', '')), parseFloat(data.disTimelyRate.replace('%', ''))]
        } else {
          this.octagon.octagonNumber = [0, 0]
          this.pyramid.tipsMessage[0].message = 0
          this.$parent.showTips('请求失败，点击确认继续刷新')
        }
      }, res => {
        this.octagon.octagonNumber = [0, 0]
        this.pyramid.tipsMessage[0].message = 0
        this.$parent.showTips('请求失败，点击确认继续刷新')
      })
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.getServiceOrderInfoByMonth(isRefresh)
        this.getCKHoumePageOrderInfoByMonth(isRefresh)
        this.presentMonth()
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
        this.handleData2()
      }
    },
    handleData () {
      let data = this.employeeTrend
      let seriesData = []
      if (data.length > 0) {
        data.forEach(item => {
          seriesData.push(parseFloat(item.orderTotal))
        })
      }
      this.barLineConfigTop.seriesData = [{
        data: seriesData,
        name: '员工报单',
        colorIndex: 2,
        isBar: true
      }]
    },
    handleData2 () {
      let accomplishArr = []
      let timelyArr = []
      let bottomData = this.employeeInformation
      if (bottomData.length > 0) {
        bottomData.forEach(item => {
          accomplishArr.push(parseFloat(item.overRate.replace('%', '')).toFixed(2))
          timelyArr.push(parseFloat(item.disTimelyRate.replace('%', '')).toFixed(2))
        })
      }
      this.barLineConfigBottom.seriesData = [
        {
          data: accomplishArr,
          name: '完成率',
          colorIndex: 0
        },
        {
          data: timelyArr,
          name: '响应及时率',
          colorIndex: 1
        }
      ]
    },
    resizeChart () {
      this.$refs.module.resizeChart()
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.employeeReportTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.employeeReportTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.employeeReportTimer)
  }
}
</script>
<style lang="scss" scoped>
.employee-report {
  .module-content {
    width: 100%;
    height: 100%;
  }
  .module-left {
    width: 70%;
    height: 100%;
    float: left;
  }
  .module-right {
    width: 30%;
    height: 65%;
    transform: translate(0, 46%);
    float: left;
    position: relative;
    & /deep/ .singleRing-title {
      position: absolute;
      left: 0;
      bottom: 4%;
      color: #fff;
    }
  }
}
</style>
